<template>
  <table-layout>
    <template slot="form">
      <el-form :model="form" label-position="right" label-width="80px">
        <form-items
          :configs="configs"
          :formData="form"
          @onSearch="onSearch"
          @onReset="onReset"
        >
          <template #dateHeader> 自定义label: </template>
          <template #date> 此处是date的自定义</template></form-items
        >
      </el-form>
    </template>
    <template slot="btn">
      <el-button
        icon="el-icon-plus"
        type="primary"
        size="mini"
        @click="handleAdd(undefined, 'add')"
        >新增
      </el-button>

      <!-- <el-button
        type="primary"
        size="small"
        v-if="utils.permission(['smart_site_total_fence_modify'])"
        >权限按钮</el-button
      >
      <el-button
        type="primary"
        size="small"
        v-if="utils.permission(['smart_site_total_fence_modify1'])"
        >无权限按钮</el-button
      > -->
    </template>
    <template slot="table">
      <TableColumns
        v-loading="loading"
        ref="fTable"
        :data.sync="tableData"
        :columns="columns"
        :showOperator="true"
        :operatorWidth="220"
        :showPager="true"
        :total="total"
      >
        <template #default="{ scope }">
          <el-link type="text" @click="edit(scope.row)"
            >编辑</el-link
          ></template
        >
        <template #pager>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </template>
      </TableColumns>
    </template>

    <CommonDialog ref="refDialog"></CommonDialog>
  </table-layout>
</template>
<script>
import { FormItems, FormData } from "./config/form.js";
import { TableColumns } from "./config/table.js";
import { page } from "@/mixins/page";
import { cloneDeep } from "lodash";
import utils from "@/utils/utils.js";
export default {
  name: "DynamicTest",
  mixins: [page],
  data() {
    return {
      utils,
      form: cloneDeep(FormData),
      configs: cloneDeep(FormItems),
      tableData: [],
      columns: cloneDeep(TableColumns),
      loading: false,
    };
  },
  created() {
    this.onSearch();
  },
  methods: {
    onSearch(resetPage) {
      this.loading = true;
      this.tableData = [];
      setTimeout(() => {
        this.tableData = [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            department: "大前端",
            personNo: "021.1",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
            department: "大前端",
            personNo: "021.2",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
            department: "大前端",
            personNo: "021.3",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
            department: "大前端",
            personNo: "021.4",
          },
        ];
        this.total = this.tableData.length;
        this.loading = false;
      }, 1000);
    },
    onReset() {
      this.form = cloneDeep(FormData);
    },
    handleAdd() {
      this.$message.success("新增成功");
    },
    edit(row) {},
  },
};
</script>
<style scoped lang="scss">
</style>
